<template>
  <div class="home">
    <header>
      <span>
        <a-icon type="left" />
      </span>
      <span>登录</span>
      <span>
        <a-icon type="ellipsis" />
      </span>
    </header>
    <main>
      <img src="./imges/16.png" alt @click="showModal" />
      <div class="pop">
        <a-modal v-model="visible" @ok="handleOk" class="pdd">
          <p>您好，小程序需要您的授权才能更好的为您服务哦~</p>
          <h6>获取你的公开信息(昵称,头像,手机号等)</h6>
        </a-modal>
      </div>
    </main>
  </div>
</template>

<script>
import s1 from "./imges/16.png";
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      console.log(e);
      this.visible = false;
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: cornflowerblue;
  color: #ffffff;
  padding: 0px 40px;
}
main {
  flex: 1;
  overflow-y: auto;
}
main img {
  width: 100%;
  height: 100%;
  margin-left: 7px;
}
.pop {
  text-align: center;
}
</style>